<template>
    <mt-tabbar v-model="selected" class="tabbar">
        <mt-tab-item id="tab1">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wenzhang-copy"></use>
            </svg>
            美文
        </mt-tab-item>
        <mt-tab-item id="tab2">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tupian"></use>
            </svg> 
            图片
        </mt-tab-item>
        <mt-tab-item id="tab3">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-quan"></use>
            </svg>
            主页
        </mt-tab-item>
        <mt-tab-item id="tab4">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-lvhang"></use>
            </svg>
            旅行
        </mt-tab-item>
        <mt-tab-item id="tab5">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhuye"></use>
            </svg>
            我的
        </mt-tab-item>
    </mt-tabbar>
</template>
<script>
export default {
    data(){
        return{
            selected:'tab3'
        }
    },
    methods:{
        
    },
    watch:{
        selected:{
            handler:function(val,oldVal){
                this.$emit("tabChange",val)
            },
            immediate:true
        }
    }
}
</script>
<style scoped>
    .tabbar{
        font-size: 16px
    }
</style>
